<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-show="loading">Loading...</dv-loading>
      <div class="flex-column main">
        <my-header></my-header>
        <!-- 主体部分 -->
        <div class="container">
          <div class="column-1 flex-column">
            <!--收入分析-->
            <my-srfx ref="srfx"
                     class="srfx"
                     :incomeAnalysisTableList="incomeAnalysisTableList"></my-srfx>
            <!--销售同比分析-->
            <sale-tb-stat ref="saleTb"
                          :equallyCustomerVOList="equallyCustomerVOList"
                          class="saleTb"></sale-tb-stat>
            <!--产品类型-->
            <product-type ref="productType"
                          :productTypeStatisticVOS="productTypeStatisticVOS"
                          class="productType"></product-type>
            <!--区域收入统计-->
            <area-srtj ref="areaSrtj"
                     :areaVoltageTableList="areaVoltageTableList"
                     class="areaSrtj mt-20"></area-srtj>
          </div>
          <div class="column-2 flex-column">
            <sale-stat ref="sale" :saleStatisticsTableVO="saleStatisticsTableVO"></sale-stat>
            <e-map ref="map" :areaVoltageTableList="areaVoltageTableList" class="map"></e-map>
          </div>
          <div class="column-3 flex-column">
            <!--实时/红外图像切换-->
            <div class="tab-box">
              <div class="tab"
                   @click="tabChange(tab)"
                   :class="{'right':tab.value === 'hw','active':tab.value === activeTab}"
                   :style="{backgroundImage:`url(${(activeTab === tab.value?tab.bgActive:tab.bg)})`}"
                   v-for="tab in tabList">{{tab.name}}</div>
            </div>
            <div class="real-img-box">
              <real-image ref="realImage" @detailClick="detailClick" :data="realImgList"></real-image>

            </div>

          </div>
          <div class="column-4 flex-column">
            <env-data ref="env"
                      @detailClick="detailClick"
                      class="environment"
                      :environmentalList="environmentalList"></env-data>
            <elec-stat ref="electricity"
                       class="electricity"
                       @detailClick="detailClick"
                       :largeScreenEnergyByYearVOS="largeScreenEnergyByYearVOS"
                       :largeScreenEnergyVOS="largeScreenEnergyVOS"></elec-stat>
            <water-stat ref="water"
                        class="water"
                        :largeScreenWaterByYearVOS="largeScreenWaterByYearVOS"
                        :largeScreenWaterVOS="largeScreenWaterVOS"
                        @detailClick="detailClick"></water-stat>
            <monitor-stat ref="monitor" class="monitor" :videoList="videoList"></monitor-stat>
          </div>
        </div>

      </div>
    </div>
    <detail-modal ref="detail" title="1号实验室1"> </detail-modal>
  </div>
</template>

<script>
  import drawMixin from '../mixins/drawMixin' //自适应缩放
  import * as echarts from 'echarts'
  import myHeader from './components/Header'
  import mySrfx from './components/Srfx'
  import areaSrtj from './components/area-srtj'
  import saleTbStat from './components/sale-tongbi-stat'
  import productType from './components/product-type'
  import saleStat from './components/Sale-stat'
  import eMap from './components/e-map'
  import realImage from './components/real-image'
  import envData from './components/env-data'
  import elecStat from './components/electricity-stat'
  import waterStat from './components/water-stat'
  import monitorStat from './components/monitor-stat'
  import detailModal from './modals/detailModal/detail-modal'
  import webScoketData from '@/assets/js/websocket.json'
  export default {
    mixins: [drawMixin],
    components: {
      waterStat,
      elecStat,
      myHeader,
      areaSrtj,
      mySrfx,
      saleStat,
      eMap,
      realImage,envData,monitorStat,
      productType,
      detailModal,
      saleTbStat
    },
    data () {
      return {
        loading: true,
        activeTab:'ss',
        tabList:[
          {
            name:'实时图像',
            value:'ss',
            bg:require('../assets/imgs/ss_un_select.png'),
            bgActive:require('../assets/imgs/ss_select.png')
          },{
            name:'红外测温图像',
            value:'hw',
            bg:require('../assets/imgs/hw_un_select.png'),
            bgActive:require('../assets/imgs/hw_select.png')
          }
        ],
        realImgList:[],
        wsIp:'ws://192.168.0.200/socket',
        incomeAnalysisTableList:[],//收入分析
        areaVoltageTableList:[],//区域电压
        saleStatisticsTableVO:{},//销售统计
        environmentalList:[],//环境数据
        largeScreenEnergyVOS:[],//用电统计
        largeScreenEnergyByYearVOS:[],//用电统计按年
        largeScreenWaterVOS:[],//用水统计
        largeScreenWaterByYearVOS:[],//用水统计按年
        productTypeStatisticVOS:[],//产品类型
        equallyCustomerVOList:[],//销售同比分析
        videoList:[]
      }
    },
    methods:{
      detailClick(data){
        this.$refs.detail.showModal(data)
      },
      tabChange(tab){
        this.activeTab  = tab.value
      },
      formatData(data){
        this.incomeAnalysisTableList = data.incomeAnalysisTableList;
        this.areaVoltageTableList = data.areaVoltageTableList;
        this.saleStatisticsTableVO = data.saleStatisticsTableVO;
        this.environmentalList = data.environmentalList;
        this.largeScreenEnergyVOS = data.largeScreenEnergyVOS;
        this.largeScreenEnergyByYearVOS = data.largeScreenEnergyByYearVOS;
        this.largeScreenWaterVOS = data.largeScreenWaterVOS;
        this.largeScreenWaterByYearVOS = data.largeScreenWaterByYearVOS;
        this.productTypeStatisticVOS = data.productTypeStatisticVOS;
        this.equallyCustomerVOList = data.equallyCustomerVOList;
        this.realImgList = data.workshoplData&&data.workshoplData.workshopManageDetails||[]
        this.videoList = data.workshoplData&&_.chunk(data.workshoplData.flvUrl,6)||[]
        this.$nextTick(()=>{
          this.$refs.srfx.setOption()
          this.$refs.areaSrtj.setOption()
          this.$refs.sale.setOption()
          this.$refs.env.setOption()
          this.$refs.electricity.setOption()
          this.$refs.water.setOption()
          this.$refs.productType.setOption()
          this.$refs.saleTb.setOption()
          this.$refs.map.setOption()
          this.$refs.monitor.initData()
        })
      },
      connect(){
        console.log(webScoketData);
        this.formatData(webScoketData)
        // this.webSocket = new WebSocket(this.wsIp)
        // this.webSocket.onopen = (evt) => {
        // }
        // this.webSocket.onmessage = evt=>{
        //   const data = JSON.parse(evt.data)
        //   console.log(_.cloneDeep(data))
        //   this.formatData(data)
        //
        // }
      },
    },
    mounted () {
      this.connect()
    },
    beforeDestroy () {

    },
  }
</script>

<style lang="scss">

  //页面样式部分！！！！
  #index {
    color: #d3d6dd;
    width: 5120px;
    height: 2880px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
    /*overflow: scroll;*/
    font-size: 22px;

    .bg {
      //整体页面背景
      width: 100%;
      height: 100%;
      padding: 0 72px 71px 72px;
      background: #060E1F;
      /*background: url("../assets/imgs/test/test4.jpg")no-repeat;*/
      /*background-size: 100% 100%;*/
      .main {
        width: 100%;
        height: 100%;
      }

      .container {
        display: flex;
        align-items: stretch;
        flex: 1;
        min-height: 0;
        > * {
          height: 100%;
        }

        .column-1 {
          width: 19.3%;
          flex: none;
          .srfx {
            width: 100%;
            height: 20%;

          }
          .saleTb {
            width: 100%;
            height: 20%;

          }
          .productType {
            width: 100%;
            height: 20%;

          }
          .areaSrtj{
            width: 100%;
            flex: 1;
            min-height: 0;
          }
          >*+*{
            margin-top: 20px;
          }
        }

        .column-2 {
          margin-left: 100px;
          flex: 1;
          .map{
            flex: 1;
            min-height: 0;
            margin-top: 100px;
          }

        }

        .column-3 {
          padding:23px 0 23px 50px;
          width: 30.6%;
          flex: none;
          box-sizing: content-box;
          .real-img-box{
            background: url("../assets/imgs/ex_bg.png")no-repeat;
            background-size: 100% 100%;
            flex: 1;
            padding: 90px;
            position: relative;
          }
          .tab-box{
            position: relative;
            text-align: right;
            margin-bottom: 30px;
            .tab{
              cursor: pointer;
              font-size: 36px;
              background-repeat: no-repeat;
              display: inline-block;
              padding: 10px 30px 10px 20px;
              background-size: 100% 100%;
              opacity: .9;
              &:hover{
                opacity: 1;
              }
              &.right{
                padding-left: 30px;
              }
              &.active{
                color: #333333;
                transition: all ease-in 0.2s;
              }
            }
            .tab+.tab{
              margin-left: -10px;
            }


          }
        }
        .column-4{
          margin-left: 44px;
          width: 19.3%;
          flex: none;
          >*+*{
            margin-top: 20px;
          }
          .environment{
            height: 23%;
          }
          .electricity{
            height: 23.5%;
          }
          .water{
            height: 22%;
          }
          .monitor{
            flex-grow: 1;
          }
        }
      }
    }


  }
</style>

